import {h} from "snabbdom/src/package/h";
import {VNode} from "snabbdom/src/package/vnode";
import {ItemInterface} from "./itemInterface";
import {RemoveSingleItem} from "./RemoveSingleItem";

let CreateDomWithList = (originalData:Array<ItemInterface>):VNode => {
    let dataList = originalData.map(m => {
        return h(`li.rank${m.rank}`,
            {
                style: {
                    border: '1px solid rgba(0, 0, 0, 0.2)',
                    listStyleType: 'none',
                    userSelect: 'none',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                },
                key: m.rank
            }, [
                h(`h1.rank${m.rank}`, {
                        style: {
                            width: '3em',
                            textAlign: 'center'
                        }
                    },
                    m.rank),
                h(`p.title${m.rank}`, {style: {width: '6em'}}, m.title),
                h(`p.desc${m.rank}`, {style: {width: 'calc(100% - 10em)'}}, m.desc),
                h(`p.close${m.rank}`, {
                    style: {width: '1em', alignSelf: 'start', margin: '0', fontSize: '2em', color: '#938331'},
                    on: {
                        click: (e) => {
                            console.log(`close operation: ${m.title}`);
                            RemoveSingleItem(m.rank, originalData);
                        }
                    }
                }, '×')
            ]
        )
    });

    return h(
        'ul#ulList', {
            key: 'movieList',
            style: {
                padding: '0'
            }
        }, dataList
    );
};
export {CreateDomWithList};